<template>
  <div class="form-preview-group form-attachment-preview">
    <label>{{_displayName}} <span class="form-preview-notNull" v-if="field.isNull == 0">*</span></label>
    <div class="form-preview-mock">
      <p class="form-attachment-preview-placeholder">
        <i class="iconfont icon-fdn-attachment"></i>
      </p>
    </div>
  </div>
</template>

<script>
import { previewProps } from '@src/component/form/components/props';
import translate from '@src/component/form/mixin/translate.js'
export default {
  name: 'form-attachment-preview',
  props: previewProps,
  mixins:[translate],
}
</script>

<style lang="scss">
.form-attachment-preview .form-preview-mock{
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.form-attachment-preview-placeholder{
  flex: 1;
  color: #9a9a9a;
  margin: 0 0 0 8px;
  font-size: 14px;
  @include text-ellipsis(); 
}

.form-attachment-preview .btn{
  padding: 4px 12px;
}
</style>
